<template>
  <div class="app-container">
    <div class="filter-container">
      <!--
      a-form-model rules 对动态标签处理时，item-label * 号不出现,需一开始指定，必须绑定,所直接在a-form-model-item标签中直接绑定，也要提取准备好require=true，先设置true，最后再根据规则调整位false
      -->
      <a-form-model ref="ruleForm" :model="formModel" layout="inline">
        <!--        <a-form-model-item :key="testItem.model" :label="testItem.label" :prop="testItem.model" :rules="rules[testItem.model]">-->
        <!--          &lt;!&ndash;          <a-input allowClear  v-model="formModel[`${testItem.model}`]" :placeholder="testItem.placeholder" >&ndash;&gt;-->
        <!--          &lt;!&ndash;          </a-input>&ndash;&gt;-->

        <!--          <a-select v-model="formModel[`${testItem.model}`]" allow-clear :placeholder="testItem.placeholder" />-->
        <!--        </a-form-model-item>-->
        <a-row v-for="(rowItem ,rowIndex) in formList.form" :key="rowIndex" :gutter="rowItem.gutter">
          <a-col v-for="(formItem,colIndex) in rowItem.colList" v-show="colShow[formItem.model]" :key="colIndex" :span="rowItem.span">
            <input-tpl-ui
              ref="modalFormTplUi"
              :form-item="formItem"
              :enum-data="tableEnumData"
              :modal-fn-data="modalFn"
              :rules="rules"
              :modal-form="formModel"
              :open-param="openParam"
              :ui-page-url="uiPageUrl"
              :form-event="formEvent"
              :input-style="formItem.inputStyle"
              :file-data="fileData"
              @changeEvent="inputChangeEvent"
              @clearEmpty="clearEmpty"
            />
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <div class="table-operator">
      <div v-if="showChart.defaultShow" :id="tableEchartId" style="width: 100%;height: 270px" />
    </div>
    <div class="table-operator">
      <!-- <div style="display: flex; flex-wrap: wrap"> -->
      <operator-btn-tpl-list
        :toolbar-menu-data="tableToolbarMenu"
        :toolbar-list-data="tableToolbarList"
        :table-selected-key-data="tableSelectedKey"
        :ui-page-url="uiPageUrl"
        @tableOperatorBtnMenuCommand="tableOperatorBtnMenuCommand"
        @tableOperatorBtnOnClick="tableOperatorBtnOnClick"
        @tableOperatorBtnUpload="tableOperatorBtnUpload"
      />
    </div>
    <div>
      <div v-if="tableSelectTips" class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon" /> 已选择 <a style="font-weight: 600">{{ tableSelectedKey.length }}</a>项
        <a style="margin-left: 24px" @click="tableClearSelected">清空</a>
      </div>

      <a-table
        :ref="tableId"
        table-layout="auto"
        fixed="true"
        :bordered="tableBordered"
        :scroll="tableScroll"
        :row-key="tableRowKey"
        :size="tableSize"
        :loading="loading"
        :pagination="tablePagination"
        :row-selection="{selectedRowKeys: tableSelectedKey,onChange: tableOnSelect,type:rowSelectType}"
        :columns="tableColumns"
        :custom-row="processCustomRow"
        :data-source="tableData"
        @change="tableOnChange"
      >
        <!--        <template v-if="initHeadTitle" slot="title" slot-scope="text,record,rowIndex,rowColumn">-->
        <!--          Header-->
        <!--        </template>-->
        <template slot="progress" slot-scope="text,record,rowIndex,rowColumn">
          <span>
            <a @click="processOnClick(text,record,rowIndex,rowColumn)">
              {{ text }}
            </a>
          </span>
        </template>
        <span slot="tags" slot-scope="text, record,rowIndex,rowColumn">
          <a-tag
            v-for="tag in customRowIdxTagsObj[rowColumn.dataIndex][rowIndex]"
            :key="tag"
            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
        <span slot="action" slot-scope="text, record,rowIndex,rowColumn">
          <a v-for="(btnItem,index) in customRowIdxBtnObj[rowColumn.dataIndex][rowIndex]" :key="index" @[btnItem.eventName]="columnBtnOnClick(btnItem, record)">{{ btnItem.name }}{{ text }}
            <a-divider v-if="(customRowIdxBtnObj[rowColumn.dataIndex][rowIndex].length -1) > index" :type="tableDividerType" />
          </a>
          <router-link v-for="(btnItem,index) in customRowIdxBtnObj[rowColumn.dataIndex][rowIndex]" v-if="btnItem.compTag === 'r'" :key="index" :to="{query:{id:1}}" target="_blank">
            {{ btnItem.name }}
            <a-divider :type="tableDividerType" />
          </router-link>
          <a-popconfirm v-for="(btnItem,index) in customRowIdxBtnObj[rowColumn.dataIndex][rowIndex]" v-if="btnItem.compTag === 'confirm'" :key="index" :title="btnItem.title" @[btnItem.eventName]="columnBtnOnClick(btnItem, record)">
            <a>{{ btnItem.name }}</a>
            <a-divider :type="tableDividerType" />
          </a-popconfirm>

          <a-divider v-if="customRowIdxMenuObj[rowColumn.dataIndex][rowIndex].length > 0" :type="tableDividerType" />
          <a-dropdown v-if="customRowIdxMenuObj[rowColumn.dataIndex][rowIndex].length > 0">
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item v-for="(menuItem,index) in customRowIdxMenuObj[rowColumn.dataIndex][rowIndex]" :key="index">
                <a v-show="menuItem.show" v-if="menuItem.compTag === 'a'" @[menuItem.eventName]="columnBtnOnClick(menuItem, record)">{{menuItem.name, record}}</a>
                <a-popconfirm v-else-if="menuItem.compTag === 'confirm'" :title="menuItem.title" @[menuItem.eventName]="columnBtnOnClick(menuItem, record)"><a>{{ menuItem.name }}</a></a-popconfirm>
                <a v-else="menuItem.compTag === 'a'" @[menuItem.eventName]="columnBtnOnClick(menuItem, record)">{{ menuItem.name }}</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
    </div>
  </div>
</template>
<script>

const tableColumns = []
const tableData = []
import { Modal } from 'ant-design-vue'
import Pagination from '@/components/Pagination'
import { getEnumData, submitDealReq, getFnInputParam, inputChangeEvent,
  initRules, changeFormRules, changeFormKeyRules,
  initForm, changeForm, initColumnList, changeColumnList, initColumnListBtn, initRowBtn,
  initColShow, changeColShow, changeColKeyShow,
  initFormFnParam, changeFormFnParam, changeFormKeyFnParam,
  initToolbar, changeToolbar, initToolbarMenu, changeToolbarMenu,
  inputChangeEventControlObj, initTableEvent, changeTableEvent,
  changeSelectRow, initEnumParam, initTableRowKey,
  getDealParam, getRefOpenObj, initFormUiData, processCustomRowColumnBtn,
  executeRecord, deleteRecord, batchDeleteRecord, fetchPageData } from '@/utils/auth'
import inputTplUi from './inputTplUi'
import operatorBtnTplList from './operatorBtnTplList'
import columnBtnTplList from './columnBtnTplList'
import request from '@/utils/request'
import vm from 'vm'
import echarts from 'echarts'
import resize from '@/components/Charts/mixins/resize'
export default {
  name: 'TableTplView2',
  components: { Pagination, inputTplUi, operatorBtnTplList, columnBtnTplList },
  mixins: [resize],
  props: ['S_PAGE_ID', 'S_PAGE_VER', 'S_PARTITION', 'tableTplListUiData', 'tableEvent', 'tableId', 'paramData', 'tableObjParam', 'uiPageUrl', 'tableEchartId'],
  data() {
    return {
      initHeadTitle: false,
      initSrcLabel: 'page',
      initFormKey: 'whereFormList',
      initTableKey: 'tableTplList',
      initUiVal: {}, // 初始化满足条件当前呈现UI数据
      rules: { }, // 查询条件校验规则
      openParam: {}, // 开窗数据
      initData: {}, // 查询条件初始化数据
      remoteDataSet: {},
      openReturnData: {}, // 开窗返回参数
      customForm: {}, // 自定义查询条件变量:true b比如S_ID:true
      customColumn: {}, // 自定义列S_ID:true
      clickRow: {}, // 点击事件记录
      // rules: { 'test': [{ required: true, message: '必填' }] },
      validatorRules: {},
      testRulesTmp: [{ required: false, message: '非必填', objEl: '(record.I_TMP_OBJ_DATA_2021 === 1)' }, { required: true, message: '必填', objEl: '(record.I_TMP_OBJ_DATA_2021 === 1)' }],
      // testRules: [{ required: true, message: '必填' }],
      testRules: [],
      testItem: { model: 'test', label: 'testd', placeholder: 'test' },
      viewChart: null,
      showChart: { defaultShow: true },
      ehUrlKey: {},
      inputStyle: 'width: 260px',
      screenWidthFix: 1.1,
      inputWidthFix: 0.75,
      fileData: {},
      formList: [],
      formKey: [],
      modalFn: {},
      toolbarFn: {},
      selection: [],
      selectCellRow: null,
      selectCellCol: null,
      selectCell: null,
      pagination: {
        size: 10,
        num: 1
      },
      total: 0,
      queryParams: {},
      tableExtProp: {},
      rowSelectType: 'checkbox',
      // rowSelectType: 'radio',
      tableWhereFormToolbar: [],
      tableSelectTips: false,
      // tableId:'table',
      tableScroll: { x: 550 },
      tableDividerType: 'vertical',
      tableBordered: true,
      tableRowKey: 'S_ID',
      checkable: true,
      tableSize: 'middle',
      loading: false,
      tableRightMenu: { update: true, delete: false, insert: true, insertRoot: true, select: false, copy: false, detail: false },
      tableFirstRow: {},
      tableSelectedKey: [],
      tableSelectedRow: [],
      tableSelectedNode: null,
      tableDropTrigger: '',
      tableQueryParam: { iPageNo: 1 },
      enumParam: {},
      tableEnumData: {},
      tableColumns: tableColumns,
      tableData: tableData,
      tablePagination: { current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: this.showTotal,
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },

      initTableStyle: {},
      initTableEvent: [],
      // initToolbarMenu: [],
      // initToolbarList: [],
      initColumnMenu: [],
      initColumnBtn: [],

      tableToolbarMenu: [],
      tableToolbarList: [],

      tableColumnMenu: [],
      tableColumnBtn: [],
      customRowIdxBtnObj: {},
      customRowIdxMenuObj: {},
      customRowIdxTagsObj: {},
      tableColumnSorter: {
        column: 'createTime',
        order: 'desc'
      },
      // tableSearchForm: this.$form.createForm(this),
      formModel: {},
      formEvent: {},
      formShow: {},
      colShow: {},
      rowShow: {},

      dealApi: {
        page: { S_PAGE_ID: '', S_PAGE_VER: 'v0.02', S_PARTITION: 32 },
        list: { S_PAGE_ID: '', S_PAGE_VER: 'v0.02', S_PARTITION: 32 }
      },
      dealParam: {
        page: { S_DY_PARAM: [] },
        delete: { S_DY_PARAM: [] }
      },
      sessionFilterList: '',
      sessionTplId: '',
      columnBtnAction: {},
      showAction: ['action', 'S_REF_PAGE_ID_IDX', 'S_TMP_OBJ_ID_2021', 'S_PATH_NAME'],
      showTags: ['I_FLAG_text']
    }
  },
  watch: {
    paramData(val) {
      const _this = this
      // this.tableOnLoadData();
      _this.initFormObjValue(val)
      _this.$nextTick(() => {
        _this.searchQuery()
      })
    },
    tableFirstRow(val) {
      // this.processCustomRowOnClick(val, 0)
    }
  },
  mounted() {
    // 延迟加载采用mounted重新挂载
    // if (undefined === this.tableTplListUiData) {
    //   return
    // }
    // this.initUI(this.tableTplListUiData, 'detail')
    if (undefined === this.paramData) {
      return
    }
    if (Object.keys(this.paramData).length !== 0) {
      this.tableOnLoadData()
    }
  },
  methods: {
    changeCheckable(tableExtProp) {
      if (undefined !== tableExtProp) {
        this.tableExtProp = tableExtProp
        if (undefined !== this.tableExtProp.selectType) {
          if (this.tableExtProp.selectType === 'checkbox' || this.tableExtProp.selectType === 'radio') {
            this.rowSelectType = this.tableExtProp.selectType
          }
        }
      }
    },
    initTableRowKey() {
      const thisObj = this
      initTableRowKey(thisObj)
    },
    // initTableEvent() {
    //   const thisObj = this
    //   initTableEvent(thisObj)
    // },
    initEnumParam() {
      const thisObj = this
      initEnumParam(thisObj)
    },
    getLocalParamDataSet() {
      // 入参数据集
      const thisObj = this
      const record = Object.assign({}, thisObj.openParam, thisObj.initData, thisObj.openReturnData, thisObj.formModel)
      return record
    },
    changePanelInitUiVal(formItem, triggerObj) {
      // 变更呈现数据
      const selectedRow = this.tableSelectedRow
      const localParamDataSet = this.getLocalParamDataSet()
      this.$emit('tableChangeEvent', formItem, triggerObj, localParamDataSet, selectedRow)
    },
    changeUiEventTrigger(formItem, triggerObj) {
      const selectedRow = this.tableSelectedRow
      const localParamDataSet = this.getLocalParamDataSet()
      this.$emit('uiChangeEvent', formItem, triggerObj, localParamDataSet, selectedRow)
    },
    initColumnListBtn() {
      const thisObj = this
      initColumnListBtn(thisObj)
    },
    initColumnList() {
      const thisObj = this
      initColumnList(thisObj)
    },
    changeColumnList(formItem, triggerObj) {
      const thisObj = this
      changeColumnList(thisObj, triggerObj, this.formModel)
    },
    initForm() {
      const thisObj = this
      initForm(thisObj)
    },
    changeForm(triggerObj, param) {
      const thisObj = this
      changeForm(thisObj, triggerObj, param)
    },
    initToolbar() {
      // 一开始初始化按钮栏
      const thisObj = this
      initToolbar(thisObj)
    },
    otherCompSetValClearData() {
      const thisObj = this
      const tmpData = Object.assign({})
      thisObj.tableQueryParam = Object.assign(tmpData)
      thisObj.initData = Object.assign(tmpData)
      thisObj.openReturnData = Object.assign(tmpData)
      thisObj.formModel = Object.assign(tmpData)
    },
    otherCompSetValOpenParam(triggerObj, param) {
      const thisObj = this
      this.otherCompSetValClearData()
      this.initSrcLabel = param.initSrcLabel
      this.openParam = Object.assign({}, param)
      thisObj.formModel = Object.assign({}, this.openParam, param)
      const record = thisObj.getLocalParamDataSet()
      this.tableQueryByParam(record)
      this.changeToolbar(triggerObj)
    },
    changeToolbar(triggerObj) {
      // 设置具体变量字段呈现
      // triggerObj 触发对象,没有填写null
      const thisObj = this
      const record = thisObj.getLocalParamDataSet()
      changeToolbar(thisObj, triggerObj, record)
    },
    initToolbarMenu() {
      // 一开始初始化按钮栏
      const thisObj = this
      initToolbarMenu(thisObj)
    },
    changeToolbarMenu(triggerObj) {
      // 设置具体变量字段呈现
      // triggerObj 触发对象,没有填写null
      const thisObj = this
      const record = thisObj.getLocalParamDataSet()
      changeToolbarMenu(thisObj, triggerObj, record)
    },
    initUiLabel(srcLabel) {
      if (undefined === srcLabel || srcLabel === null || srcLabel === '') {
        if (this.openParam.initSrcLabel !== undefined) {
          this.initSrcLabel = this.openParam.initSrcLabel
        } else {
          this.initSrcLabel = 'page'
        }
      } else {
        this.initSrcLabel = srcLabel
      }
    },
    initRules() {
      // 开始初始化所有项目为必填
      const thisObj = this
      initRules(thisObj)
    },
    changeFormRules() {
      // 加载结束后,根据规则调整对应表单校验方式
      const thisObj = this
      changeFormRules(thisObj)
    },
    changeFormKeyRules(key) {
      // 单个变量校验规则调整设置
      const thisObj = this
      changeFormKeyRules(thisObj, key)
    },
    initColShow() {
      // 一开始初始化字段参数
      const thisObj = this
      initColShow(thisObj)
    },
    changeColShow() {
      // 设置初始加载表单读写参数
      const thisObj = this
      changeColShow(thisObj)
    },
    changeColKeyShow(key) {
      // 设置具体变量字段呈现
      const thisObj = this
      changeColKeyShow(thisObj, key)
    },
    initFormFnParam() {
      // 一开始初始化读写参数
      const thisObj = this
      initFormFnParam(thisObj, true)
    },
    changeFormFnParam(srcLabel) {
      // 设置初始加载表单读写参数
      const thisObj = this
      changeFormFnParam(thisObj, srcLabel)
    },
    changeFormKeyFnParam(key, srcLabel) {
      const thisObj = this
      changeFormKeyFnParam(thisObj, key, srcLabel)
    },
    initTblEvent() {
      const thisObj = this
      initTableEvent(thisObj)
    },
    clearIniUi() {
      // 清除初始化数据
      const tmpArr = Object.assign([])
      const tmpData = Object.assign({})
      this.initUiVal = Object.assign(tmpData)
      this.initData = Object.assign(tmpData)
      this.nowRow = Object.assign(tmpData)
      this.openParam = Object.assign(tmpData)
      this.formModel = Object.assign(tmpData)
      this.formList = Object.assign(tmpArr)
      this.tableToolbarMenu = Object.assign(tmpArr)
      this.tableToolbarList = Object.assign(tmpArr)
    },
    initUI(val, srcLabel, param, tableExtProp) {
      const _this = this
      this.clearIniUi()
      this.initUiVal = val
      this.openParam = param
      console.log('open param....', this.openParam)
      this.formModel = Object.assign({}, this.openParam)
      this.initTableRowKey()
      this.initEnumParam()
      this.initColShow()
      this.initUiLabel(srcLabel)
      this.initRules()
      this.initForm()
      this.initFormFnParam()
      this.initToolbar()
      this.initToolbarMenu()
      this.initColumnList()
      this.initColumnListBtn()
      this.initTblEvent()
      this.initEcharts()
      if (undefined === val || undefined === val.urlList) {
        return
      }
      initFormUiData(this, val, srcLabel)
      const pagination = this.getPaginationVal(val)
      this.tablePagination = Object.assign({}, pagination)
      if (undefined !== val.style) {
        this.initTableStyle = val.style
      }
      this.changeCheckable(tableExtProp)
      // if (undefined !== tableExtProp) {
      //   this.tableExtProp = tableExtProp
      //   if (undefined !== this.tableExtProp.selectType) {
      //     this.rowSelectType = this.tableExtProp.selectType
      //   }
      // }
      this.initShowEchart(val)
      _this.$nextTick(() => {
        _this.changeFormRules()
        // _this.changeForm(null, param)
        _this.changeFormFnParam(_this.initSrcLabel)
        _this.changeColShow()
        _this.initEnum()
        _this.changeToolbar(null)
        _this.changeToolbarMenu(null)
        // _this.$nextTick(() => {
        //   _this.searchQuery()
        // })
      })
    },
    getOpenObjReturnValue() {
      console.log('获取开窗记录返回数据')
    },
    setOpenObjValue() {
      console.log('设置开窗记录数据')
    },
    setFormObjValue() {
      console.log('设置表单记录')
    },
    setTableObjValue() {
      console.log('设置表格记录')
    },
    setFormRecord() {
      console.log('初始化记录函数')
    },
    initRecord() {
      console.log('初始化记录函数')
    },
    copyRecord() {
      console.log('复制记录函数')
    },
    detailRecord() {
      console.log('详细记录函数')
    },
    deleteRecord() {
      console.log('删除记录函数')
    },
    updateRecord() {
      console.log('更新记录函数')
    },
    insertRecord() {
      console.log('保存记录函数')
    },
    searchList() {
      console.log('列表查询函数')
      fetchPageData(this, this.getTableSearchForm())
    },
    searchPage() {
      console.log('分页查询函数')
      fetchPageData(this, this.getTableSearchForm())
    },
    exportRecord() {
      console.log('导出记录函数')
    },
    importRecord() {
      console.log('导入记录函数')
    },
    batchDeleteRecord() {
      console.log('批量删除记录函数')
    },
    batchInsertRecord() {
      console.log('批量保存记录函数')
    },
    batchUpdateRecord() {
      console.log('批量更新记录函数')
    },
    loadRecord() {
      console.log('加载记录')
    },
    batchLoadRecord() {
      console.log('批量加载记录')
    },
    testColumnBtnOnClick(text, record, rowIndex, rowColumn) {
      console.log('0000000rowColumn00000000', rowColumn)
      console.log('0000000text00000000', text)
    },
    getSessionHourGroupList() {
      this.sessionFilterList = 'I_CREATE_YEAR,I_CREATE_MONTH,I_CREATE_DAY,I_CREATE_HOUR'
      this.queryEchartsData()
    },
    getSessionDayGroupList() {
      this.sessionFilterList = 'I_CREATE_YEAR,I_CREATE_MONTH,I_CREATE_DAY'
      this.queryEchartsData()
    },
    getSessionMonthGroupList() {
      this.sessionFilterList = 'I_CREATE_YEAR,I_CREATE_MONTH'
      this.queryEchartsData()
    },
    initEcharts() {
      if (!this.tableObjParam.showEchart) {
        this.showChart.defaultShow = false
        return
      }
      const chartObj = document.getElementById(this.tableEchartId)
      if (chartObj === null || undefined === chartObj || undefined === chartObj) {
        return
      }
      this.viewChart = echarts.init(chartObj)
    },
    initEchartsData() {
      const optionData = {
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }]
      }
      if (this.viewChart !== null) {
        this.viewChart.setOption(optionData)
      }
    },

    queryEchartsData() {
      const _this = this
      const urlKey = this.ehUrlKey.S_BLOCK_URL_KEY
      const echartsParam = { viewKey: 5 }
      const dealParam = getDealParam(this, urlKey, this.getTableSearchForm())
      console.log('0000dealParam0000', dealParam)
      const newParam = Object.assign({}, echartsParam, dealParam)
      newParam.sessionFilterList = this.sessionFilterList
      newParam.S_BLOCK_EH_ID = this.ehUrlKey.S_BLOCK_EH_ID
      _this.loading = true
      submitDealReq(newParam).then((res) => {
        _this.loading = false
        console.log('queryEchartsData...data....', res.data.data)
        const optionData = res.data.data
        if (this.viewChart !== null) {
          this.viewChart.setOption(optionData)
        }
      }).catch(reason => {
        _this.loading = false
        console.log('reason' + reason)
      })
    },
    queryUiTplData() {
      const _this = this
      const urlKey = this.ehUrlKey.S_BLOCK_URL_KEY
      const echartsParam = { viewKey: 5 }
      const dealParam = getDealParam(this, urlKey, this.getTableSearchForm())
      const newParam = Object.assign({}, echartsParam, dealParam)
      newParam.sessionFilterList = this.sessionFilterList
      console.log('qu,eryUiTplData@@@@@@@', this.ehUrlKey)
      _this.loading = true
      submitDealReq(newParam).then((res) => {
        _this.loading = false
        console.log('queryEchartsData...data....', res.data.data)
        const optionData = res.data.data
        if (this.viewChart !== null) {
          this.viewChart.setOption(optionData)
        }
      }).catch(reason => {
        _this.loading = false
        console.log('reason' + reason)
      })
    },

    initShowEchart(val) {
      if (this.tableObjParam.showEchart) {
        if (undefined === val.ehOptions || val.ehOptions === 'undefined' || val.ehOptions === null) {
          this.showChart.defaultShow = false
        } else {
          const optionData = val.ehOptions.data
          if (this.viewChart !== null && undefined !== optionData) {
            this.showChart.defaultShow = true
            this.viewChart.setOption(optionData)
            this.initEchartsData()
            this.ehUrlKey = optionData.urlKey
            console.log('dealApi.....', this.dealApi)
          } else {
            this.showChart.defaultShow = false
          }
        }
      }
    },
    selectFirstRow() {
      const _this = this
      if (undefined !== _this.tableObjParam) {
        _this.$emit(_this.tableObjParam.selectFirstRow, this.tableFirstRow)
      }
    },
    clearEmpty(item) {
      console.log('00000000000000', item)
    },
    processCustomRowTags(record, rowIndex) {
      for (const tagIdx in this.showTags) {
        const tag = this.showTags[tagIdx]
        const val = record[tag]
        let varArr = []
        if (undefined !== val) {
          varArr = val.split(',')
        }
        const tagData = {}
        tagData[rowIndex] = varArr
        this.customRowIdxTagsObj[tag] = tagData
      }
    },
    processCustomRow(record, rowIndex) {
      const thisObj = this
      this.processCustomRowTags(record, rowIndex)
      initRowBtn(thisObj, record, rowIndex)
      return {
        on: {
          // 鼠标单击行
          click: event => {
            thisObj.clickRow = record
            this.processCustomRowOnClick(record, rowIndex)
            // this.processCustomRowColumnBtn(record);
            changeTableEvent(thisObj, 'click', '单击事件')
          },
          dblclick: (event) => {
            thisObj.clickRow = record
            changeTableEvent(thisObj, 'dblclick', '双击事件')
            console.log('..dblclick...', record)
          },
          contextmenu: (event) => {
            // 不对外开放
            thisObj.clickRow = record
            changeTableEvent(thisObj, 'contextmenu', '右键菜单事件')
            console.log('..contextmenu...', record)
          }
        }
      }
    },
    processCustomRowOnClick(record, rowIndex) {
      console.log('....click...')
      const _this = this
      if (undefined !== _this.tableObjParam && _this.tableObjParam.rowOnClick === true) {
        _this.$emit(_this.tableEvent.rowOnClick, record)
      }
    },
    processCustomRowOnDblClick(record, rowIndex) {
      const _this = this
      if (undefined !== _this.tableObjParam && _this.tableObjParam.rowOnDblClick === true) {
        _this.$emit(_this.tableEvent.rowOnDblClick, record)
      }
    },
    processOnClick(text, record, rowIndex, rowColumn) {
      const refOpenObj = this.getRefOpenObj(rowColumn, record)
      if (refOpenObj !== null) {
        rowColumn.refOpen = refOpenObj
        this.$emit('openGeneralModal', rowColumn, record)
      }
      // this.$message.success(text);
    },

    getRefOpenObj(rowColumn, record) {
      return getRefOpenObj(rowColumn, record)
    },

    changeFormList(formItem, eventObj) {
    },
    changeTabsList(formItem, eventObj) {
    },
    changeLoadEnumList(formItem, eventObj) {
      const _this = this
      const urlKey = 'enum'
      const dealParam = getDealParam(this, urlKey, this.getTableSearchForm())
      const param = Object.assign({}, dealParam, this.enumParam)
      console.log('param...', param)
      _this.loading = true
      getEnumData(param).then((res) => {
        _this.loading = false
        _this.tableEnumData = res.data.enumData
      })
    },
    changeLoadFormData(formItem, eventObj) {
      const _this = this
      const urlKey = 'init'
      const dealParam = getDealParam(this, urlKey, this.getTableSearchForm())
      const param = Object.assign({}, dealParam)
      _this.loading = true
      submitDealReq(param).then((res) => {
        _this.loading = false
        if (res.data.success) {
          console.log('请求初始化加载数据,', res.data.data)
          _this.$message.success(res.data.message)
        } else {
          _this.$message.warning(res.data.message)
        }
      })
    },
    changeLoadListData(formItem, eventObj) {
    },
    inputChangeEventControlObj(formItem) {
      const thisObj = this
      inputChangeEventControlObj(thisObj, formItem)
    },
    changeUploadFile(btnItem) {
      this.nowBtnItem = btnItem
    },
    tableOperatorBtnUpload(btnItem, data) {
      const thisObj = this
      const formData = new FormData()
      formData.append('file', data.file)
      for (const key in this.formModel) {
        formData.append(key, this.formModel[key])
      }
      for (const key in this.openParam) {
        formData.append(key, this.formModel[key])
      }
      // openParam 中必须包含pkRefId（主业务主键）,pkSubId(次业务主键,单业务可无)
      console.log('888888', this.uiPageUrl)
      formData.append('btnIdIdx', btnItem.id)
      formData.append('S_UI_PAGE_ID_IDX_2025', this.uiPageUrl.S_UI_PAGE_ID_IDX_2025)
      formData.append('S_UI_PAGE_VER_IDX_2025', this.uiPageUrl.S_UI_PAGE_VER_IDX_2025)
      formData.append('S_UI_PARTITION_2025', this.uiPageUrl.S_UI_PARTITION_2025)
      request.upload('/autodeal/file/ctr/upload', formData).then((res) => {
        console.log('..res.data..', res)
        /** * **/
        if (res.status === 200) {
          thisObj.searchQuery()
        } else {
          this.$message.error(res.statusText)
        }
      })
    },
    // uploadCustomRequest(formItem,data) {
    //   const thisObj = this
    //   console.log('uiPageUrl####', data)
    //   const formData = new FormData()
    //   formData.append('file', data.file)
    //   for (const key in this.formModel) {
    //     console.log('key######',this.formModel[key])
    //     formData.append(key, this.formModel[key])
    //   }
    //   formData.append('S_PAGE_ID', this.uiPageUrl.S_UI_PAGE_ID_IDX_2025)
    //   formData.append('S_PAGE_VER', this.uiPageUrl.S_UI_PAGE_VER_IDX_2025)
    //   formData.append('S_PARTITION', this.uiPageUrl.S_UI_PARTITION_2025)
    //   request.upload('/autocode/file/ctr/upload', formData).then((res) => {
    //     console.log('..res.data..', res)
    //     /** * **/
    //     if (res.status === 200) {
    //       const fileData = res.data.data
    //       const tmpData = {}
    //       tmpData.item = formItem
    //       tmpData.fileList = fileData
    //       const itemData = {}
    //       itemData[formItem.model] = tmpData
    //       thisObj.fileData = Object.assign({}, thisObj.fileData, itemData)
    //       for (const i in fileData) {
    //         this.$message.success(`${fileData[i].name} file uploaded successfully`)
    //         const param = {}
    //         param.S_UPLOAD_FILE_PK_ID = fileData[i].uid
    //       }
    //     } else {
    //       this.$message.error(res.statusText)
    //     }
    //   })
    // },
    inputChangeEvent(formItem, data) {
      // console.log('@@@@@@@@@inputChangeEvent@@@@@', formItem)
      // this.uploadCustomRequest(formItem, data)
      const thisObj = this
      inputChangeEvent(thisObj, formItem)
    },
    inputOpenGeneralModal(formItem, record) {
      console.log('...', formItem)
      this.$emit('openGeneralModal', formItem, record)
    },
    getRowFieldValue(selectionRows, field) {
      return getRowsFieldValue(selectionRows, field)
    },
    setBtnView(param) {
      this.tableToolbarList = this.getBtnArrVal(param, this.initToolbarList)
    },
    getPaginationVal(val) {
      const pagination = this.tablePagination
      // if (val.tblList !== null && val.tblList.table !== null && val.tblList.table.S_PAGINATION_JSON !== null) {
      //   pagination.pageSize = val.tblList.table.S_PAGINATION_JSON.pageSize
      //   // pagination.pageSizeOptions = val.tblList.table.S_PAGINATION_JSON.pageSizeOptions;
      // }
      // else{
      pagination.pageSize = this.tablePagination.pageSize
      pagination.pageSizeOptions = this.tablePagination.pageSizeOptions
      // }
      return pagination
    },
    getBtnArrVal(record, val) {
      if (undefined !== val) {
        return processCustomRowColumnBtn(record, val)
      }
      return []
    },
    initEnum() {
      const _this = this
      const urlKey = 'enum'
      const dealParam = getDealParam(this, urlKey, this.getTableSearchForm())
      const param = Object.assign({}, dealParam, this.enumParam)
      console.log('param...', param)
      getEnumData(param).then((res) => {
        _this.tableEnumData = res.data.enumData
      })
    },
    showTotal(total, range, t, c) {
      return '第' + range[0] + '-' + range[1] + '条记录,共' + total + '条'
    },
    getCallFnByFnType(btnItem) {
      if (btnItem.fnType === 8) {
        // 下载类函数
        return 'downloadUploadFile'
      } else if (btnItem.fnType === 7) {
        return 'changeUploadFile'
      } else if (btnItem.fnType === 6) {
        return 'changeToOtherQuery'
      } else if (btnItem.fnType === 5) {
        return 'importFileData'
      } else if (btnItem.fnType === 4) {
        return 'exportFileData'
      } else if (btnItem.fnType === 3) {
        return 'execute'
      } else if (btnItem.fnType === 2) {
        return 'openGeneralModal'
      } else if (btnItem.fnType === 1) {
        return 'searchQuery'
      } else {
        return 'searchQuery'
      }
    },
    columnBtnOnClick(btnItem, record) {
      if (record === null) {
        record = this.tableSelectedRow
      }
      const thisObj = this
      const tmp = changeSelectRow(thisObj, record)
      console.log('tableOperatorBtnOnClick', tmp)
      const fn = this.getCallFnByFnType(btnItem)

      // const fn = btnItem.fn
      if (fn) {
        // if (record) {
        this[fn](btnItem, tmp)
        // } else {
        //   this[fn](btnItem, tmp)
        // }
      } else {
        this.$message.warning('按钮未配置响应函数')
      }
    },
    tableOperatorBtnOnClick(btnItem) {
      // data 上传附件数据
      const thisObj = this
      // 按钮条事件响应
      const record = changeSelectRow(thisObj, this.tableSelectedRow)
      console.log('tableOperatorBtnOnClick', btnItem)
      const fn = this.getCallFnByFnType(btnItem)
      console.log('fffff...fn@@@@@@@@@@', fn)
      // const fn = btnItem.fn
      this[fn](btnItem, record)
    },
    setTableSearchForm(record) {
      const _this = this
      _this.formModel = Object.assign({}, this.formModel, record)
      _this.tableQueryParam = Object.assign({}, this.tableQueryParam, record)
    },
    getTableSearchForm() {
      return this.formModel
    },
    searchQuery(btnItem, selectedRow) {
      this.tablePagination.current = 1
      this.tableOnLoadData(btnItem, selectedRow)
    },
    tableQueryByParam(param) {
      const _this = this
      _this.$nextTick(() => {
        _this.tableOnLoadData()
      })
    },

    tableOnChange(pagination, filters, sorter) {
      const thisObj = this
      if (Object.keys(sorter).length > 0) {
        this.tableColumnSorter.column = sorter.field
        this.tableColumnSorter.order = sorter.order === 'ascend' ? 'asc' : 'desc'
      }
      changeTableEvent(thisObj, 'change', '分页或表头事件')
      this.tablePagination = pagination
      this.tableOnLoadData()
    },
    tableOnSelect(selected, record) {
      const thisObj = this
      this.tableSelectTips = true
      this.tableSelectedKey = selected
      if (selected.length === 0) {
        this.tableSelectedRow = []
      } else {
        this.tableSelectedRow = changeSelectRow(thisObj, record)
      }
      if (undefined !== this.tableEvent.select && this.tableEvent.select !== '') {
        this.$emit(this.tableEvent.select, this.tableSelectedRow)
      }
      changeTableEvent(thisObj, 'onSelect', '选中事件')
      // this.$emit('openTableMenuSelect', record)
    },
    saveTableSearchForm(btnItem, record) {
      const _this = this
      if (undefined === btnItem.urlKey || btnItem.urlKey === null || btnItem.urlKey === '') {
        btnItem.urlKey = 'saveForm'
      }
      _this.execute(btnItem, record)
    },
    openGeneralModal(btnItem, record) {
      let param = Object.assign({}, this.tableQueryParam, this.formModel)
      if (record.length > 0) {
        param.item = record
      } else {
        param = Object.assign({}, param, record)
      }
      const refOpenObj = this.getRefOpenObj(btnItem, param)
      if (refOpenObj !== null) {
        btnItem.refOpen = Object.assign({}, refOpenObj)
        if (this.tableEvent.generalModal !== '') {
          this.$emit(this.tableEvent.generalModal, btnItem, param)
        }
      } else {
        this.$message.warning('无满足条件开窗数据,请联系管理员.')
      }
    },
    getInputSetVal(record, btnItem) {
      return getFnInputParam(record, btnItem.refSetOpenVal)
    },
    downloadUploadFile(btnItem, record) {
      // 下载上传文件
      const inputParam = this.getInputSetVal(record, btnItem)
      const url = '/autodeal/file/ctr/download/' + inputParam.S_ID
      request.download(url, {}, inputParam.S_FILE_NAME)
    },
    appendTableData(rows) {
      for (const idx in rows) {
        this.tableData.push(rows[idx])
      }
      this.tablePagination.total = this.tableData.length
    },
    setTableData(rows) {
      this.tableData = []
      for (const idx in rows) {
        this.tableData.push(rows[idx])
      }
      this.tablePagination.total = this.tableData.length
    },
    clearTableData() {
      this.tableData = []
      this.tablePagination.total = 0
    },
    getTableData() {
      return this.tableData
    },
    tableSelectedTitle() {
      return !this.tableSelectedRow.title ? '' : this.tableSelectedRow.title
    },
    tableClearSelected() {
      this.hiding = true
      this.tableSelectTips = false
      this.tableSelectedRow = []
      this.tableSelectedKey = []
    },
    openTableUpload(btnItem, record) {
      console.log('openTableUpload btnItem', btnItem)
      console.log('openTableUpload record', record)
      this.$emit(this.tableEvent.impModal, btnItem, record, this.dealApi)
    },

    exportFileData(btnItem, record) {
      const _this = this
      let param = {}
      if (undefined !== record) {
        param = Object.assign({}, record)
      }
      // param.url ="/run/ctr/submitExportXls/";
      // param.iPageNo = 1;
      // param.iPageSize =500;
      // param =  Object.assign({},param, _this.dealApi.expUrl);
      // this.openTableExport(param);
      console.log('openTableDownLoad btnItem', btnItem)
      _this.$emit('openTableDownLoad', btnItem, record)
    },
    openTableDownLoadTemplate(btnItem, record) {
      const _this = this
      let param = {}
      if (undefined !== record) {
        param = Object.assign({}, record)
      }
      param.url = '/run/ctr/submitUploadTemplate/'
      param.iPageNo = 1
      param.iPageSize = 1
      param = Object.assign({}, param, _this.dealApi.impUrl)
      this.openTableExport(param)
    },
    openTableExport(param) {
    },
    openTableLoad(btnItem, record) {
      const _this = this
      if (undefined === btnItem.urlKey || btnItem.urlKey === null || btnItem.urlKey === '') {
        btnItem.urlKey = 'load'
      }
      _this.execute(btnItem, record)
    },
    openTableMenuLoad(btnItem, record) {
      const _this = this
      if (undefined === btnItem.urlKey || btnItem.urlKey === null || btnItem.urlKey === '') {
        btnItem.urlKey = 'menuLoad'
      }
      _this.execute(btnItem, record)
    },
    execute(btnItem, record) {
      executeRecord(this, btnItem, record)
    },
    clearSelections() {
      this.$refs[this.tableId].clearSelection()
    },
    clearSelectCellData() {
      this.selectCellRow = null
      this.selectCellCol = null
      this.selectCell = null
    },
    handleCellClick(row, column, cell, event) {
      this.selectCellRow = row
      this.selectCellCol = column
      this.selectCell = cell
    },
    tableOperatorBtnMenuCommand(command) {
      let btnMenuItem = null
      for (const i in this.initToolbarMenu) {
        const btnMenu = this.initToolbarMenu[i]
        if (btnMenu.key === command) {
          btnMenuItem = btnMenu
          break
        }
      }
      this.columnBtnOnClick(btnMenuItem, this.tableSelectedRow)
    },
    handleColMenuCommand(command) {
      let menuItem = {}
      for (const i in this.initColumnMenu) {
        const columnMenu = this.initColumnMenu[i]
        if (columnMenu.key === command) {
          menuItem = columnMenu
          break
        }
      }
      this.columnBtnOnClick(menuItem, this.selectCellRow)
    },
    openTableMenuBatchDelete(btnItem) {
      batchDeleteRecord(this, btnItem)
    },
    openTableMenuDelete(btnItem, record) {
      if (record !== null) {
        const rowIds = record[this.tableRowKey]
        deleteRecord(this, btnItem, rowIds, record)
      }
      // this.tableClearSelected()
    },
    singleDelete(btnItem, row) {
      this.$refs[this.tableId].toggleRowSelection(row, true)
      batchDeleteRecord(this, btnItem)
    },
    initFormObjValue(param) {
      this.formModel = Object.assign({}, this.formModel, param)
      this.tableQueryParam = Object.assign({}, this.tableQueryParam, param)
    },
    tableOnLoadData(btnItem, selectedRow) {
      this.search(btnItem, selectedRow)
    },
    search(btnItem, selectedRow) {
      fetchPageData(this, this.getTableSearchForm(), btnItem)
    },
    reloadLoadData(data, modalKey, postParam) {
      this.search()
    },
    remoteDataSuccess(btnItem, returnData, modalKey, modalForm) {
      this.search()
    },
    insertSuccess(btnItem, returnData, modalKey, modalForm) {
      this.search()
    },
    updateSuccess(btnItem, returnData, modalKey, modalForm) {
      this.search()
    },
    deleteSuccess(btnItem, rowIds, record) {
      this.tableClearSelected()
      this.search()
    }
  }
}
</script>
<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
